﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example02.aspx.cs" Inherits="Chapter39.Example02" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 39-2 编录本地存储事件</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <style>
        table {
            border-collapse: collapse;
            margin-left: 50px;
        }

        th, td {
            padding: 4px;
        }
    </style>
</head>
<body>
    <table id="data" border="1">
        <tr>
            <th>key</th>
            <th>oldValue</th>
            <th>newValue</th>
            <th>url</th>
            <th>storageArea</th>
        </tr>
    </table>
    <script>
        var tableElem = document.getElementById('data');
        window.onstorage = handleStoreage;
        function handleStoreage(e) {
            var row = '<tr>';
            row += '<td>' + e.key + '</td>';
            row += '<td>' + e.oldValue + '</td>';
            row += '<td>' + e.newValue + '</td>';
            row += '<td>' + e.url + '</td>';
            row += '<td>' + (e.storageArea == localStorage) + '</td></tr>';
            tableElem.innerHTML += row;
        }
    </script>
</body>
</html>
